<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Image Gallery</title>
	<link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen" />
</head>
<body>
	<h1>Snapshots</h1>
	<ul id="imagegallery">
		<li>
			<a href="images/fireworks.jpg"  title="A firework display"> 
				<img src="images/thumbnail_fireworks.jpg" alt="Fireworks" />
			</a>
		</li>
		<li>
			<a href="images/coffee.jpg"  title="A cup of black coffee">
				<img src="images/thumbnail_coffee.jpg" alt="Coffee"/>
			</a>
		</li>
		<li>
			<a href="images/rose.jpg"  title="A red, red rose">
				<img src="images/thumbnail_rose.jpg" alt="Rose" />
			</a>
		</li>
		<li>
			<a href="images/bigben.jpg"  title="The famous clock"> 
				<img src="images/thumbnail_bigben.jpg" alt="Big Ben"/>
			</a>
		</li>
	</ul>
	<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
	<p id="description">Choose an image.</p>

	<script type="text/javascript" src="scripts/showPic.js"></script>
</body>
</html>